<template>
    <div class="duplicate-order">
        <ItemDetail :show.sync="showModal" :value="item" title="Edit Item" :id="itemID" @submit="confirmSubmit"
                    :action="action" :height="600"></ItemDetail>
        <!--<div class="row">-->
            <!--<div class="col-md-12">-->
                <!--<filter-form :columns="filters" @submit="submit"></filter-form>-->
            <!--</div>-->
        <!--</div>-->
        <div class="row">
            <div class="col-md-12">
                <item-table title="Duplicate Order List" :columns="defaultColumns" :total="data.length"  :data="data" :loading="tableLoading" @sort="sort">
                    <template slot="room_title" slot-scope="props">
                        <div class="td-ellipsis">
                            {{props.item.room_title}}
                        </div>
                        <i v-tooltip.top="'Show Detail'" class="fif fif-ellipsis text-info" @click="showTdDetail(props.item.room_title)"></i>
                    </template>
                    <template slot="actions" slot-scope="props">
                        <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5"
                                @click="_edit(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                        <button type="button" class="btn btn-warning btn-outline btn-circle btn-md m-r-5"
                                @click="_ignore(props)">
                            <i class="fif fif-check"></i>
                        </button>
                    </template>
                </item-table>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    // utlis
    import {toJsonData} from '@/utils'
    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'
    // api
    import {orderRepeat} from '@/api/notification'
    // config
    import columns from '@/config/columns'

    export default {
        name: "DuplicateOrder",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail},
        mixins: [lifeHookMixin, itemMixin],
        created() {
           this.defaultColumns = columns['Order2']
        },
        data() {
            return {
                // data
                originData: null,
                keyWord: '',
            }
        },
        watch: {
            keyWord() {
                this.filter()
            },
        },
        methods: {
            fetch() {
                if (!this.tableLoading) {
                    this.tableLoading = true
                    orderRepeat().then(res => {
                        this.table = res.data
                        this.originData = toJsonData(this.table.headers, this.table.data)
                        this.filter()
                        this.tableLoading = false
                    }).catch(e => {
                        this.tableLoading = false
                    })
                }
            },
            filter() {
                let data = []
                if (this.keyWord) {
                    if (this.originData) {
                        data = this.originData.filter((item) => {
                            return  String(item.physical_room_id).indexOf(this.keyWord) != -1 || // physical_room_id
                                    String(item.checkin).indexOf(this.keyWord) != -1 || // checkin
                                    String(item.checkout).indexOf(this.keyWord) != -1 ||// checkout
                                    String(item.gentime).indexOf(this.keyWord) != -1 ||// gentime
                                    String(item.reservation_code).indexOf(this.keyWord) != -1  // reservation_code
                        })
                    }
                } else {
                    data = this.originData
                }

                if (this.orderBy) {
                    data.sort((a, b) => {
                        return this.orderDir == 'descend' ?
                            a[this.orderBy].localeCompare(b[this.orderBy]) : b[this.orderBy].localeCompare(a[this.orderBy])
                    })
                }

                this.data = data
            },
            sort(dir, column) {
                this.orderBy = column[0]
                this.orderDir = dir[0]
                this.filter()
            },
            _edit(props) {
                this.model = 'Order'
                this.editItem(props)
            },
            _ignore(props) {
                this.noteName = 'orderrepeat'
                this.ignoreItem(props)
            }
        }
    }
</script>

<style scoped lang="stylus">
    .duplicate-order
        .app-search
            input[placeholder]
                color : #fff !important;
            input::-webkit-input-placeholder
                      color : #fff !important;
</style>